<template>
  <div class="product">
    <!-- 导航栏 -->
    <div class="navBar">
      <van-nav-bar
        title="分类"
        left-text="返回"
        left-arrow
        @click-left="goBack"
      />
    </div>
    <!-- 产品内容展示区 -->
    <div class="productContent">
      <!-- 导航栏 -->
      <div class="categorySideBar">
        <van-tabs v-model="activeKey" animated @change="onChange" color="#7232dd">
          <van-tab v-for="item in categoryData" :key="item.id" :title="item.name" >
          </van-tab>
        </van-tabs>
      </div>
      <!-- 产品展示区域 -->
      <div class="productList">
        <!--           @click="productwindow(item)" -->
        <van-card
          v-for="item in productData"
          :key="item.id"
          :price="item.price + '.00'"
          :desc="item.description"
          :title="item.name"
          :thumb="item.photo"
          :num="item.num"
          @click="productwindow(item)"
        >
        </van-card>
      </div>
    </div>
    <!-- 底部提交按钮 -->
    <div class="footer" style="height:50px">
      <van-submit-bar :price="total * 100" button-text="确认" @submit="onSubmit" button-color="#7232dd" />
    </div>
    <!-- 弹出面板 -->
    <van-action-sheet v-model="show" :title="actionTitle">
      <div class="content">
        <!-- 弹出商品图片 -->
        <div class="photo"><van-image
          width="200"
          :src="lines.photo"
        />
        </div>
        <!-- 弹出商品价格 -->
        <div class="price">
          ￥{{lines.price}}
        </div>
        <div class="desc">
          <van-cell-group inset>
            <van-cell title="商品描述" :label="lines.description" size="large"/>
          </van-cell-group>
        </div>
        <!-- 步进器 -->
        <div class="foot">
          <van-stepper @change='numShopCar(lines)' :default-value='0' :min='0' v-model="lines.num" button-size="36" disable-input />
        </div>
      </div>
      <div class="shop">
        <van-goods-action>
          <van-goods-action-button color="#be99ff" type="danger" text="购买更多" @click="more"/>
          <van-goods-action-button color="#7232dd" type="danger" text="下单" @click="onSubmit"/>
        </van-goods-action>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { mapActions, mapState , mapMutations, mapGetters } from 'vuex';
import { Toast } from 'vant';
export default {
  data() {
    return {
      // active: 2,
      activeKey: -2,
      // 标签页的动画true为开启
      animated: true,
      // 分页数据
      productCategoryId: "",
      // 步进器
      value: 0,
      // 弹出框标题
      actionTitle: "",
      // 弹出框显示与隐藏
      show: false,
      // 订单数组
      lines:[],
      // 数量
      num:0,
    };
  },
  //生命周期
  created() {
    // console.log(this.$route.query.activeKey);
    // 转number类型 赋值给标签栏的v_model
    // this.active = Number(this.$route.query.activeKey)
    this.productCategoryId = this.$route.query.productCategoryId;
    // 从首页点击分类，跳到对应的分类展示产品
    this.activeKey = Number( this.$route.query.activeKey)

    // 执行辅导函数拿到分类数据提交给mutations
    this.getCategoryDataVuex({
      page: 1,
      pageSize: 100
    }),
    // 根据分类获取产品数据
    this.getProductDataVuex({
      page: 1,
      pageSize: 100,
      productCategoryId: this.productCategoryId,
      status:'正常'
    })
  },
  methods: {
    // 导入辅导函数
    ...mapActions('category',['getCategoryDataVuex']),
    ...mapActions('product',['getProductDataVuex']),
    // 导入购物车方法
    ...mapMutations('shopcar',['addShopCar','clearShopCar']),
    // 返回上一级
    goBack(){
      this.$router.go(-1),
      this.clearShopCar()
    },
    // 监听导航栏的变化商品跟随变化
    onChange(index){
      // index 当前点击的菜单栏的索引
      // 分类的数组
      // console.log(this.categoryData[index].id);
      // 根据分类获取产品数据
      this.getProductDataVuex({
        page:1,
        pageSize: 100,
        productCategoryId: this.categoryData[index].id,
        status:'正常'
      })
    },
    // 添加到购物车
    // 监听步进器发生改变
    // 让步进器监听到的订单添加到购物车中
    numShopCar(item){
      // item 代表的是每一条订单
      console.log(item);
      // 声明点击步进器产生的订单
      let orderLine={
        productId:item.id,
        name:item.name,
        price:item.price,
        num:item.num,
        photo:item.photo,
      }
      // 把订单添加到购物车里面
      this.addShopCar(orderLine);
      // console.log(orderLine);

    },
    // 提交
    onSubmit(){
      if(this.total!=0){
        this.$router.push({
          path:'orderConfirm',
        })
      }else{
        // 提示
        Toast('请选择商品');
      }
    },
    // 弹窗
    productwindow(line){
      this.show = true,
      console.log(line);
      this.actionTitle = line.name;
      this.lines = line
    },
    // 购买更多
    more(){
      this.show= false;
    }
  },
  computed: {
    ...mapState('category',['categoryData']),
    ...mapState('product',['productData']),
    // 引入购物车总金额
    ...mapGetters('shopcar',['total'])
  },
};
</script>

<style scoped>
/* 设置弹出框的样式 */
.van-action-sheet {
  height: 600px;
}
.photo{
  margin-left: 26%;
}
van-stepper{
  margin-left: 80%;
}
.foot{
  margin-left: 60%;
  margin-top: 10px;
}
.van-card {
  width: 95%;
  border-radius: 15px;
  margin: 5px auto;
  padding: 5px;
  margin: 10px;
}
</style>